<style>
</style>
<template>
    <ly-page>
        <ly-navi title="echarts数据可视化"></ly-navi>
        <ly-page-content blank>
            <ly-page-box>

                <ly-page-box-content>
                    <ly-panel>
                        <ly-panel-content>
                            <ly-markdown v-my="0">
                               <pre v-pre>
- 图表使用的 [echarts](https://www.echartsjs.com/examples/zh/index.html?theme=light)
- 图表使用的 [vue-echarts](https://github.com/ecomfe/vue-echarts/blob/master/README.zh_CN.md)
- 图表主题尽量使用 light

                               </pre>
                            </ly-markdown>
                        </ly-panel-content>
                    </ly-panel>
                    <ly-panel>
                        <ly-panel-content>
                            <e-chart theme="light" :options="chart2" style="width: 100%;height:300px"></e-chart>
                        </ly-panel-content>
                    </ly-panel>
                    <ly-panel>
                        <ly-panel-content>
                            <e-chart theme="light" :options="chart3" style="width: 100%;height:300px"></e-chart>
                        </ly-panel-content>
                    </ly-panel>
                    <ly-panel>
                        <ly-panel-content>
                            <e-chart theme="light" :options="chart4" style="width: 100%;height:300px"></e-chart>
                        </ly-panel-content>
                    </ly-panel>
                </ly-page-box-content>
                <ly-page-box-right width="">
                    <ly-panel>
                        <ly-panel-content style="height: 280px;">
                            <e-chart theme="light" :options="chart5" style="width: 100%;height:320px"></e-chart>
                        </ly-panel-content>
                    </ly-panel>
                    <ly-panel>
                        <ly-panel-content>
                            <e-chart theme="light" :options="chart1" style="width: 100%;height:250px"></e-chart>
                        </ly-panel-content>
                    </ly-panel>
                    <ly-panel>
                        <ly-panel-content>
                            <e-chart theme="light" :options="chart6" style="width: 100%;height:250px"></e-chart>
                        </ly-panel-content>
                    </ly-panel>
                </ly-page-box-right>
            </ly-page-box>


        </ly-page-content>

        </ly-page-content>

    </ly-page>
</template>
<script>
    Rap.define("", [], function () {
        return {
            data: function () {
                var data = [];

                for (var i = 0; i <= 360; i++) {
                    var t = i / 180 * Math.PI;
                    var r = Math.sin(2 * t) * Math.cos(2 * t);
                    data.push([r, i])
                }
                return {
                    chart6:{
                        tooltip : {
                            formatter: "{a} <br/>{b} : {c}%"
                        },
                        toolbox: {

                        },
                        series: [
                            {
                                name: '业务指标',
                                type: 'gauge',
                                title: {
                                    show: false
                                },
                                detail: {formatter:'{value}'},
                                data: [{value: 50, name: '完成率'}]
                            }
                        ]
                    },
                    chart5: {
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b}: {c} ({d}%)"
                        },
                        legend: {
//                            orient: 'vertical',
                            x: 'left',
                            data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
                        },
                        series: [
                            {
                                name: '访问来源',
                                type: 'pie',
                                radius: ['50%', '70%'],
                                avoidLabelOverlap: false,
                                label: {
                                    normal: {
                                        show: false,
                                        position: 'center'
                                    },
                                    emphasis: {
                                        show: true,
                                        textStyle: {
                                            fontSize: '20',
                                            fontWeight: 'bold'
                                        }
                                    }
                                },
                                labelLine: {
                                    normal: {
                                        show: false
                                    }
                                },
                                data: [
                                    {value: 335, name: '直接访问'},
                                    {value: 310, name: '邮件营销'},
                                    {value: 234, name: '联盟广告'},
                                    {value:135, name:'视频广告'},
                                    {value:1548, name:'搜索引擎'}
                                ]
                            }
                        ]
                    },
                    chart4: {
                        legend: {},
                        tooltip: {},
                        dataset: {
                            source: [
                                ['product', '2015', '2016', '2017'],
                                ['Matcha Latte', 43.3, 85.8, 93.7],
                                ['Milk Tea', 83.1, 73.4, 55.1],
                                ['Cheese Cocoa', 86.4, 65.2, 82.5],
                                ['Walnut Brownie', 72.4, 53.9, 39.1]
                            ]
                        },
                        xAxis: {type: 'category'},
                        yAxis: {},
                        // Declare several bar series, each will be mapped
                        // to a column of dataset.source by default.
                        series: [
                            {type: 'bar'},
                            {type: 'bar'},
                            {type: 'bar'}
                        ]
                    },
                    chart3: {
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            data: [820, 932, 901, 934, 1290, 1330, 1320],
                            type: 'line',
                            areaStyle: {}
                        }]
                    },
                    chart2: {
                        title: {
                            text: '折线图'
                        },
                        toolbox: {
                            feature: {
                                dataView: {readOnly: false},
                                saveAsImage: {}
                            }
                        },
                        theme: 'light',
                        xAxis: {
                            type: 'category',
                            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            data: [820, 932, 901, 934, 1290, 1330, 1320],
                            type: 'line'
                        }]
                    },
                    chart1: {

                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c}%"
                        },

                        legend: {
                            show: false,
                            data: ['展现', '点击', '访问', '咨询', '订单']
                        },
                        calculable: true,
                        series: [
                            {
                                name: '漏斗图',
                                type: 'funnel',
                                left: '10%',
                                top: 10,
                                //x2: 80,
                                bottom: 0,
                                width: '80%',
                                // height: {totalHeight} - y - y2,
                                min: 0,
                                max: 100,
                                minSize: '0%',
                                maxSize: '100%',
                                sort: 'descending',
                                gap: 2,
                                label: {
                                    show: true,
                                    position: 'inside'
                                },
                                labelLine: {
                                    length: 10,
                                    lineStyle: {
                                        width: 1,
                                        type: 'solid'
                                    }
                                },
                                itemStyle: {
                                    borderColor: '#fff',
                                    borderWidth: 1
                                },
                                emphasis: {
                                    label: {
                                        fontSize: 20
                                    }
                                },
                                data: [
                                    {value: 60, name: '访问'},
                                    {value: 40, name: '咨询'},
                                    {value: 20, name: '订单'},
                                    {value: 80, name: '点击'},
                                    {value: 100, name: '展现'}
                                ]
                            }
                        ]
                    }
                }
            },
            mounted: function () {
//
            },
            methods: {}
        }
    })
</script>